<template>
  <div class="siteAndRailWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-radio-group style="margin-top: 8px;" v-model="radio2" @change="searchRowsInfo(true)">
                <el-radio :label="1">企业用户管理</el-radio>
                <el-radio :label="2">巡查用户管理</el-radio>
              </el-radio-group>
            </el-col>
            <el-col :span="5" v-show="radio2==1">
              <div class="searchWrap">
                <span class="searchFont">单位名称:</span>
                <span class="searchInputFont">
                    <el-input  clearable size="mini" v-model="searchInfo.enterpriseName" @change="searchRowsInfo(true)" auto-complete="off" placeholder="单位名称"></el-input>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">姓名:</span>
                <span class="searchInputFont">
                  <el-input clearable size="mini" v-model="searchInfo.userName" @change="searchRowsInfo(true)" auto-complete="off" placeholder="姓名"></el-input>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">手机号:</span>
                <span class="searchInputFont">
                  <el-input clearable size="mini" v-model="searchInfo.mobile" @change="searchRowsInfo(true)" auto-complete="off" placeholder="手机号"></el-input>
                </span>
              </div>
            </el-col>
            <div style="float: right;margin-right: 10px;">
              <el-button type="primary" size="mini" @click="searchRowsInfo()">查询</el-button>
              <span >
                 <addBtn v-show="$store.state.btnMenuIds.indexOf(127)>-1&&radio2==1"  @searchRowsInfo="searchRowsInfo"></addBtn>
              <agencyAddBtn v-show="$store.state.btnMenuIds.indexOf(138)>-1&&radio2==2" @searchRowsInfo="searchRowsInfo"></agencyAddBtn>
              </span>

            </div>
          </el-row>
        </div>
      </div>
      <div class="tableContainer">
        <div class="tableInner">
          <el-table
            v-show="radio2==1"
            ref="multipleTable"
            :data="rows"
            stripe
            :height="tableHeight"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              label="所属单位"
              prop="enterpriseName"
              show-overflow-tooltip
            >
            </el-table-column
            <el-table-column
              label="手机号"
              prop="mobile"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="姓名"
              prop="userName"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="区域"
              prop="districtName"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.districtName ? scope.row.districtName: "全市"}}
              </template>
            </el-table-column>
            <el-table-column
              label="街道"
              prop="streetName"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="账号状态"
              prop="userStatus"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.userStatus == 0 ? "启用" : scope.row.userStatus == 1 ? "停用" : scope.row.userStatus == 2 ? "作废" : ""}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              v-if="$store.state.btnMenuIds.indexOf(128)>-1"
             >
              <template slot-scope="scope">
                <setBtn   :editInfo="scope.row"  @searchRowsInfo="searchRowsInfo" ></setBtn>
                <i  @click="resetPass(scope.row)" class="iconfont icon-zhongzhimima" style="margin-left: 10px;"></i>
                <i @click='handleEnterpriseDelete(scope.row)' class="iconfont icon-shanchu" style="margin-left: 10px;"></i>
               </template>
            </el-table-column>
          </el-table>
          <el-table
            v-show="radio2==2"
            ref="multipleTable"
            :data="rows"
            stripe
            :height="tableHeight"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <!-- <el-table-column
              label="所属单位"
              prop="agencyName"
              show-overflow-tooltip
            > -->
            </el-table-column>
            <el-table-column
              label="手机号"
              prop="mobile"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="姓名"
              prop="userName"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="账号状态"
              prop="userStatus"
              show-overflow-tooltip>
              <template slot-scope="scope">

                {{scope.row.userStatus == 0 ? "启用" : scope.row.userStatus == 1 ? "作废" : ""}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              v-if="$store.state.btnMenuIds.indexOf(136)>-1"
              width="200"
            >
              <template slot-scope="scope">
                <agencySetBtn  :editInfo="scope.row"  @searchRowsInfo="searchRowsInfo" ></agencySetBtn>                
                <i @click='handleGovDelete(scope.row)' class="iconfont icon-shanchu" style="margin-left: 10px;"></i>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="paginationWrap" >
          <el-row :gutter="10">
            <el-col :span="13" :offset="9">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 30, 50, 100,200]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="count">
              </el-pagination>
            </el-col>
          </el-row>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import addBtn from './addBtn.vue';
  import agencyAddBtn from './agencyAddBtn.vue';
  import setBtn from './setBtn.vue';
  import agencySetBtn from './agencySetBtn.vue';
  export default {
    props: [],
    data(){
      return {
        options: [
           {
            value: '1',
            label: '启用'
          }, {
            value: '2',
            label: '停用'
          }],
        options1: [
          {
            value: '1',
            label: '市交通局'
          }, {
            value: '2',
            label: '市交警局'
          }, {
            value: '3',
            label: '市城管局'
          }, {
            value: '4',
            label: '区政府'
          }],
        streetData: [],
        rows: [],
        pageSize: 10,
        radio2: 1,
        count: 0,
        currentPage: 1,
        tableHeight: 400,
        checkInfo: {},
        roleList: [],
        searchInfo: {
          enterpriseName: "",
          userName: "",
          agencyId: "",
          mobile: "",
          sortType: "",
          asc: "true"
        },
      }
    },
    components: {addBtn,setBtn,agencyAddBtn,agencySetBtn},
    created(){
      this.searchRowsInfo()
    },
    mounted(){
      this.$nextTick(() => {
        //表格高度
        this.tableHeight = document.querySelector(".siteAndRailWrap").clientHeight - 160
      })
    },

    methods: {
      resetPass(row){
        let url=this.radio2==1?'updateEnterpriseUser':'updateGovUser'
        this.$confirm('确认重置用户 “' + row.userName + '” 的密码为 "Jgpt2020" ?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(process.env.API_HOST + '/system/'+url,{...row,password:this.signPw("Jgpt2020"),loginPassword:this.signPw("Jgpt2020")})
            .then(response => {
              if (response.data.code == 200) {
                this.$message({
                  type: 'success',
                  message: '重置成功!'
                });
              }

            })
            .catch(error => {
              console.log(error);
            });

          //删除当前
        }).catch(() => {

        });
      },

      pushAndGet(row){
        this.checkInfo=row
        this.$router.push("/parkingArea/parkSet")
      },
      handleEnterpriseDelete(row){
        this.handleDelete(row, 'deleteEnterpriseUser')
      },
      handleGovDelete(row){
        this.handleDelete(row, 'deleteGovUser')
      },
      handleDelete(row, action){
        this.$confirm('确认删除用户 “' + row.userName + '” , 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(process.env.API_HOST + `/system/${action}`,{userId:row.userId})
            .then(response => {
              const result = response.data
              if (result.code === 200) {
                this.searchRowsInfo()
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }
            })

          //删除当前
        }).catch(() => {

        });
      },
      //获取街道
      changeDistrict(userName){
        this.searchRowsInfo()
        this.axios.post(process.env.API_HOST + '/common/selectRegion',{parentId:userName})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.streetData = result.result
            }
          })
      },
      //排序
      sortChange(a) {
        if (a.column) {
          if (a.column.label == "电子标签") {
            this.searchInfo.asc = !this.searchInfo.asc
            this.searchInfo.sortType = "labelNo"
            this.searchRowsInfo()
          } else if (a.column.label == "车辆编号") {
            this.searchInfo.asc = !this.searchInfo.asc
            this.searchInfo.sortType = "vehicleNo"
            this.searchRowsInfo()
          } else {
            this.searchInfo.sortType = a.prop
            this.searchRowsInfo()
          }
        } else {
          this.searchInfo.asc = "true", this.searchInfo.sortType = ""
        }
      },

      //获取所有信息
      searchRowsInfo(key){
        if(key){
          this.currentPage = 1;
        }
        let url =this.radio2==1?"selectEnterpriseUserGrid":"selectGovUserGrid"
        this.axios.post(process.env.API_HOST + `/system/`+url,{
          page: this.currentPage,
          rows: this.pageSize,
          mobile:this.searchInfo.mobile,
          userName:this.searchInfo.userName,
          enterpriseName:this.searchInfo.enterpriseName,
          agencyId:this.searchInfo.agencyId,
          hasDel: 0
        })
          .then(response => {
            const result = response.data
            if(result.code==200){
              this.rows = result.rows
              this.count = result.total;
            }
          })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.searchRowsInfo()
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.searchRowsInfo()

      },
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .siteAndRailWrap
    page()
</style>
